import { defineComponent, PropType, Ref, ref, computed, watch, nextTick } from "vue"
import { detailService } from '../../../../api/service'
import DynamicTable from '../../../../components/DynamicTable'
import styles from './index.module.scss'
import { Service, Params } from './type'

export default defineComponent({
  name: 'ServiceInfo',
  props: {
    modelValue: {
      type: String as PropType<string>,
      default: () => ''
    }
  },
  setup(props) {
    const serviceInfo: Ref<Service | null> = ref() // 服务基础信息
    const inParamsList: Ref<Params[] | null> = ref([]) // 入参列表
    const outParamsList: Ref<Params[] | null> = ref([]) // 出参列表
    const baseInfoTableData = computed(() => {
      return [
        { label: '服务名称', value: serviceInfo.value?.svcName || '' },
        { label: '服务方法', value: serviceInfo.value?.svcUrl || '' }
      ]
    })
    const baseInfoColumns = ref([
      { label: 'label', key: 'label', width: '150px' },
      { label: 'value', key: 'value' }
    ])
    const paramsColumns = ref([
      { label: '字段', key: 'paramName' },
      { label: '中文', key: 'paramNameCn' },
      { label: '类型', key: 'type' },
      { label: '默认值', key: 'defaultValue' },
    ])

    watch(() => props.modelValue, (val) => {
      if (val) {
        nextTick(() => {
          getDetailInfo(val)
        })
      }
    }, { immediate: true })

    // 获取详情内容
    const getDetailInfo = async (svcId: string) => {
      const res = await detailService(svcId)
      if (res.status === 200) {
        inParamsList.value = res.data.inParamsList
        outParamsList.value = res.data.outParamsList
        serviceInfo.value = res.data.svc
      }
    }

    return () => <>
      <el-form-item label="服务基础信息" class={styles['form-item_flex']}>
        <DynamicTable
          data={baseInfoTableData.value}
          columns={baseInfoColumns.value}
          show-header={false}
          showPagination={false}
          border
          class="auto-height"
          style={{ width: "100%" }}
        />
      </el-form-item>

      <el-form-item label="服务入参" class={styles['form-item_flex']}>
        <DynamicTable
          data={inParamsList.value}
          columns={paramsColumns.value}
          showPagination={false}
          border
          class="auto-height"
          style={{ width: "100%" }}
        />
      </el-form-item>

      <el-form-item label="服务出参" class={styles['form-item_flex']}>
        <DynamicTable
          data={outParamsList.value}
          columns={paramsColumns.value}
          showPagination={false}
          border
          class="auto-height"
          style={{ width: "100%" }}
        />
      </el-form-item>
    </>
  }
})